<template>
  <w-leaf :text="data.text" :data="data" :success="success" src="widget.php?act=area" :box-sync="true">
    <template v-if="hasBox" #box>
      <w-triplebox name="leafbox" :partialSubmit="true" :value="data.id" :checked="false" @change="boxChange" />
    </template>
    <template #text>
      <w-horizontal align="between">
        <span>{{data.text}}</span>
        <i class="f-i f-i-angle-double-right" @click="open"></i>
      </w-horizontal>
    </template>
    <template #default>
      <tmpl-leaf v-for="item in (children || data.children)" :key="item.id" :data="item" :hasBox="hasBox"></tmpl-leaf>
    </template>
  </w-leaf>
</template>

<script>
  import $ from '../../dfish.js'
  
  export default {
    name: 'tmpl-leaf',
    props: ['data', 'hasBox'],
    data() {
      return {
        children: null
      }
    },
    methods: {
      open(e) {
        $(this).toggle(null, (exp) => {
          console.log(this.children)
        })
      },
      success(res) {
        console.log(res)
        this.children = res.data
      },
      high(text) {
        return text //$.strHighlight(text, '市')
      },
      boxChange(e) {
        console.log($.vm(this).fv('leafbox'))
      }
    },
    mounted() {

    }
  }
</script>

<style>
</style>
